<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="产品名称">
                <el-input v-model="queryParams.productName" placeholder="请输入客户名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="叶片类型" prop="bladeType">
                <el-select v-model="queryParams.bladeType" placeholder="请选择叶片类型">
                    <el-option v-for="dict in dict.type.sye_product_blade" :key="dict.label" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="驱动方式" prop="driveMode">
                <el-select v-model="queryParams.driveMode" placeholder="请选择驱动方式">
                    <el-option v-for="dict in dict.type.sys_product_drive" :key="dict.label" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="外框颜色">
                <el-select v-model="queryParams.color" placeholder="请选择">
                    <el-option v-for="item in dict.type.sys_product_color" :key="item.id" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="叶片颜色">
                <el-select v-model="queryParams.bladeColor" placeholder="请选择">
                    <el-option v-for="item in dict.type.sys_product_color" :key="item.id" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单号">
                <el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客户">
                <el-input v-model="queryParams.orderCustomerName" placeholder="请输入客户名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="客服">
                <el-select v-model="queryParams.createUserId" placeholder="请选择">
                    <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实际面积">
                <div style="display: flex;">
                    <el-input v-model="queryParams.areasBegin" placeholder="请输入最小值" clearable
                        @keyup.enter.native="handleQuery" type="number" style="width: 140px;" />
                    -
                    <el-input v-model="queryParams.areasEnd" placeholder="请输入最大值" clearable
                        @keyup.enter.native="handleQuery" type="number" style="width: 140px;" />
                </div>
            </el-form-item>

            <el-form-item label="产品周长">
                <div style="display: flex;">
                    <el-input v-model="queryParams.perimeterBegin" placeholder="请输入最小值" clearable
                        @keyup.enter.native="handleQuery" type="number" style="width: 140px;" />
                    -
                    <el-input v-model="queryParams.perimeterEnd" placeholder="请输入最大值" clearable
                        @keyup.enter.native="handleQuery" type="number" style="width: 140px;" />
                </div>
            </el-form-item>
            <el-form-item label="是否低于预警值">
				<el-select v-model="queryParams.warnBelow" placeholder="请选择">
					<el-option v-for="item in dict.type.sys_isno" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="是否生产">
				<el-select v-model="queryParams.produce" placeholder="请选择">
					<el-option v-for="item in dict.type.sys_isno" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="创建时间" prop="dateRange">
				<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
					style="width: 240px" value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="timeChange">
				</el-date-picker>
			</el-form-item>


            <!-- 防止仅有一个输入框时光标在那一个输入框里时按回车出现“正在加载系统资源，请耐心等待” -->
            <input hidden />
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 工具栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning"  v-hasPermi="['orders:product:export']" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>


            <el-col :span="1.5" style="margin-left: 50px;">
				<el-tag>合计金额：{{ datas.total_amount_sum }}</el-tag>
			</el-col>
			<el-col :span="1.5">
				<el-tag>合计件数：{{ datas.product_count_sum }}</el-tag>
			</el-col>
			<el-col :span="1.5">
				<el-tag>销售面积：{{ datas.areas_sell_sum }}</el-tag>
			</el-col>
			<el-col :span="1.5">
				<el-tag>实际面积：{{ datas.areas_sum }}</el-tag>
			</el-col>
			<el-col :span="1.5">
				<el-tag>合计周长：{{ datas.perimeter_sum }}</el-tag>
			</el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
        </el-row>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" prop="id" width="60" />
            <el-table-column label="订单号" prop="orderNumber" width="140" />
            <el-table-column label="客户" prop="orderCustomerName" min-width="100" />
            <el-table-column label="客服" prop="createUserName" width="100" />
            <el-table-column label="产品名称" prop="productName" width="120" show-overflow-tooltip />
            <el-table-column label="产品件数" prop="productCount" width="80" />
            <el-table-column label="单价" prop="price" width="80" />
            <el-table-column label="预警价" prop="priceWarn" width="80" />
            <el-table-column label="是否低于预警值" prop="warnBelow" width="80" >
                <template slot-scope="scope">
					<el-tag size="medium" type="danger" v-if="scope.row.warnBelow == '1'">是</el-tag>
					<el-tag size="medium" v-else>否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="叶片类型" prop="bladeType" width="80" />
            <el-table-column label="驱动方式" prop="driveMode" width="80" />
            <el-table-column label="外框颜色" prop="color" width="80" />
            <el-table-column label="叶片颜色" prop="bladeColor" width="80" />
            <el-table-column label="客户提供框内尺寸（宽.高）" prop="orderUserName" width="120">
                <template slot-scope="scope">
                    <div>宽：{{ scope.row.sizeWidth }}</div>
                    <div>高：{{ scope.row.sizeHeight }}</div>
                </template>
            </el-table-column>
            <el-table-column label="安装尺寸（宽.高）" prop="orderUserName" width="120">
                <template slot-scope="scope">
                    <div>宽：{{ scope.row.sizeWidthWx }}</div>
                    <div>高：{{ scope.row.sizeHeightWx }}</div>
                </template>
            </el-table-column>
            <el-table-column label="小计" prop="totalAmount" width="80" />
            <el-table-column label="销售面积（单件）" prop="areasSell" width="80" />
            <el-table-column label="销售面积（合计）" prop="areasSellSum" width="80" />
            <el-table-column label="实际面积（单件）" prop="areas" width="80" />
            <el-table-column label="实际面积（合计）" prop="areasSum" width="80" />
            <el-table-column label="产品周长（单件）" prop="perimeter" width="80" />
            <el-table-column label="产品周长（合计）" prop="perimeterSum" width="80" />
            <el-table-column label="是否生产" prop="produce" width="100">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.sys_isno" :value="scope.row.produce" />
				</template>
			</el-table-column>
            
            <el-table-column label="创建时间" prop="createTime" width="150" />
            <!-- <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['system:role:edit']">处理</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['system:role:remove']">删除</el-button>
          </template>
        </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getDataList" />
    </div>
</template>

<script>
// 快递平台管理
import { getList,postOrdersPaySum} from '@/api/order/commodity'
import {
    getUserListRole,
} from '@/api/group'
export default {
    name: 'CustomerList',
    dicts: ['sys_af_type', 'sys_aftersales_type', 'sys_product_color', 'sye_product_blade', 'sys_product_drive','sys_isno'],
    data() {
        return {
            tentfrom: {
                videolist: [],
                imglist: [],

            },
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createUserId: undefined,
                orderNumber: undefined, // 平台名字
                orderCustomerName: undefined,
                productName: undefined,
                bladeType: undefined,
                driveMode: undefined,
                color: undefined,
                bladeColor: undefined,
                areasBegin: undefined,
                areasEnd: undefined,
                perimeterBegin: undefined,
                perimeterEnd: undefined,
                warnBelow:undefined,
                produce:undefined,
                beginTime:undefined,
                endTime:undefined,

            },
            dateRange:[],
            // 数据列表
            dataList: [],
            userList: [],
            datas:{
                total_amount_sum:'',
                product_count_sum:'',
                areas_sell_sum:'',
                areas_sum:'',
                perimeter_sum:'',
            }
        }
    },
    created() {
        this.getDataList()
        this.getUserList()
    },
    methods: {
        timeChange(e) {
			console.log(e)
			if (e) {
				this.queryParams.beginTime = e[0]
				this.queryParams.endTime = e[1]
			} else {
				this.queryParams.beginTime = ''
				this.queryParams.endTime = ''
			}
		},
        //客服列表
        getUserList() {
            getUserListRole({
                codes: 'kefu',
            }).then((response) => {
                let list = response.data
                this.userList = list.map(item => {
                    return {
                        label: item.nickName,
                        value: item.userId
                    }
                })
                this.userList.unshift({
                    label: '超级管理员',
                    value: 1
                })

            })
        },
        /** 查询列表 */
        getDataList() {
            this.loading = true
            getList(this.queryParams).then((response) => {
                this.dataList = response.rows
                this.total = response.total
                this.loading = false
             
            })
            postOrdersPaySum(this.queryParams).then(res=>{
                    console.log(res,'111111111');
                    this.datas =res.data
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getDataList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                createUserId: undefined,
                orderNumber: undefined, // 平台名字
                orderCustomerName: undefined,
                productName: undefined,
                bladeType: undefined,
                driveMode: undefined,
                color: undefined,
                bladeColor: undefined,
                areasBegin: undefined,
                areasEnd: undefined,
                perimeterBegin: undefined,
                perimeterEnd: undefined,
                beginTime:undefined,
                endTime:undefined,
            },
            this.dateRange = []
                this.handleQuery()
        },
        /** 多选框选中数据 */
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "orders/product/export",
                {
                    ...this.queryParams,
                },
                `订单商品.xlsx`
            );
        },
    },
}
</script>

<style lang="scss" scoped></style>